<template>
	<view class="container">
		<!-- 自定义状态栏高度 -->
		<view class="status_bar"></view>
		<view class="flex-between flex header">
			<view>
				<view class="flex-center flex">
					<uni-icons type="bars" size="24" color="#999" @tap="showLeftPopup"></uni-icons>
					<view class="flex-column-center flex left" @tap="showPopup">
						<image :src="modelList[modeIndex]?.icon" mode="widthFix" class="model-logo"></image>
						<text class="model-name">{{ modelList[modeIndex]?.name || 'Model Name' }}</text>
						<uni-icons type="right" size="12" color="#333"></uni-icons>
					</view>
				</view>
			</view>
			<view class="right flex flex-center">
				<view class="sale">Sale</view>
				<uni-icons type="chatboxes-filled" size="24" color="#E3E3E3"></uni-icons>
			</view>
		</view>

		<view class="content">
			<view class="flex-center flex title-box flex-column" v-if="messageList.length === 0">
				<view class="title-text">"HI,how can i help you? "</view>
				<image src="@/static/title-logo.png" mode="widthFix" class="title-logo"></image>
			</view>

			<view class="message-list" v-else>
				<scroll-view scroll-y class="message-list-scroll">
					<view>1212</view>
				</scroll-view>
			</view>
		</view>

		<view class="key-box">
			<view class=" flex key-box-input">
				<image v-if="!isShowKeyBox" src="@/static/add.png" @tap="()=>{isShowKeyBox = true}" mode="aspectFit"
					class="add-icon"></image>
				<image v-else src="@/static/colse.png" @tap="()=>{isShowKeyBox = false}" mode="aspectFit"
					class="add-icon"></image>
				<textarea :cursor-spacing='17' confirm-type='send' @confirm="sendMessage" auto-height v-model="textValue" placeholder="请问我任何问题..." class="textarea"></textarea>
			</view>

			<view class="flex-between flex key-box-btn" v-if="isShowKeyBox">
				<view class="li flex flex-column">
					<image src="@/static/xiangce.png" mode="aspectFit" class="add-icon"></image>
					<text>相册</text>
				</view>
				<view class="li flex flex-column">
					<image src="@/static/xiangji.png" mode="aspectFit" class="add-icon"></image>
					<text>相机</text>
				</view>
				<view class="li flex flex-column">
					<image src="@/static/file.png" mode="aspectFit" class="add-icon"></image>
					<text>文件</text>
				</view>
				<view class="li flex flex-column">
					<image src="@/static/tips.png" mode="aspectFit" class="add-icon"></image>
					<text>提示词</text>
				</view>
			</view>
		</view>


		<!-- 添加弹窗 -->
		<uni-popup ref="popup" type="top">
			<view class="popup-content">
				<view class="status_bar"></view>
				<view class="flex flex-between flex-wrap">
					<view :class="['flex flex-column-popup model-item', modeIndex === index ? 'active' : '']"
						@tap="()=>{modeIndex = index;popup.close()}" v-for="(item, index) in modelList" :key="item.id">
						<view class="li">
							<view class="flex flex-start-center">
								<image :src="item.icon" mode="widthFix" class="model-logo"></image>
								<text class="model-name">{{item.name}}</text>
							</view>
							<view class="model-desc">
								<text class="model-desc-text">{{ item.description }}</text>
							</view>
							<view class="flex flex-end-center model-consume">
								<text class="consume">{{ `消耗 ${item.diamondFee || item.starFee} ` }}</text>
								<image v-if="modeIndex === index" src="@/static/diamond-1.png" mode="aspectFit"
									class="diamond"></image>
								<image v-else src="@/static/diamond.png" mode="aspectFit" class="diamond"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 添加左侧菜单弹窗 -->
		<uni-popup ref="leftPopup" type="left" background-color="#fff">
			<view class="left-popup-content">
				<view class="status_bar"></view>
				<view class="history">历史</view>
				<scroll-view scroll-y class="menu-scroll">
					<view class="menu-list">
						<view class="menu-item">菜单项 1</view>
						<view class="menu-item">菜单项 2</view>
						<view class="menu-item">菜单项 3</view>
						<view class="menu-item">菜单项 4</view>
						<view class="menu-item">菜单项 5</view>
						<view class="menu-item">菜单项 6</view>
						<view class="menu-item">菜单项 7</view>
						<view class="menu-item">菜单项 8</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<text :prop="options" :change:prop="renderScript.onChange" v-show="false"></text>
	</view>
</template>

<script>

import { http } from '@/utils/request'
import { baseURL } from "@/config/config.js";

export default {
	data() {
		return {
			modelName: 'Model Name',
			popup: null,
			modelList: [],
			modeIndex: 5,
			leftPopup: null,
			isShowKeyBox: false,
			messageList: [{
				a: 1
			}],
			textValue: '',
			options: {
				baseURL: baseURL,
				token: uni.getStorageSync('token'),
				body: {
					sessionId: '',
					agentId: '',
					modelId: '',
					message: ''
				}
			}
		}
	},
	
	onLoad() {
		http.request({
			url: '/app/model/list',
			method: 'GET',
			data: {
				type: 'TEXT'
			}
		}).then(res => {
			this.modelList = res.data;
		})
	},
	
	methods: {
		showPopup() {
			this.$refs.popup.open();
		},
		
		showLeftPopup() {
			this.$refs.leftPopup.open();
		},
		
		sendMessage(e) {
			if(!this.textValue){
				return uni.showToast({
					title: '请输入内容',
					icon: 'none'
				})
			};

			this.options.body.message = this.textValue;
			this.options.body.modelId = this.modelList[this.modeIndex]?.id;
		},
		getSseData(data) {
			if (data != "[DONE]") {
				const _data = JSON.parse(data);
				if (_data.content) {
					console.log(_data.content,_data.sessionId)
					//listMessage.value[listMessage.value.length - 1]['content'] += _data.content;
				}
			}
		},
		sseDataEnd() {
			console.log('sseDataEnd');
		},
		onopenSse() {
			console.log('onopenSse');
		}
	}
}
</script>

<script module="renderScript" lang="renderjs">
	import {
		fetchEventSource
	} from '@microsoft/fetch-event-source';
    export default {
        methods: {
          onChange(newValue, oldValue, ownerInstance, instance) {
			
			if(!newValue.body.message) return;

            fetchEventSource(`${newValue.baseURL}/app/chat/completion`, {
            	method: 'POST',
            	headers: {
            		'Content-Type': 'application/json',
            		"Authorization": `Bearer ${newValue.token}`
            	},
            	body: JSON.stringify(newValue.body),
            	onmessage(ev) {
            		ownerInstance.callMethod('getSseData', ev.data)
            	},
            	onclose() {
            		ownerInstance.callMethod('sseDataEnd')
            	},
            	onerror(err) {
            		console.log('发生错误');
            		console.log(err)
            	},
            	async onopen(response) {
            		ownerInstance.callMethod('onopenSse')
            	},
            });
          }
        }
    }
</script>

<style lang="scss" scoped>
	.message-list {
		height: 100%;

		.message-list-scroll {
			background-color: #911c1c;
			height: 100%;
		}
	}

	.key-box-btn {
		margin-top: 32rpx;

		.li {
			width: 146rpx;
			height: 146rpx;
			border-radius: 16rpx;
			background: #f5f5f5;
			font-size: 24rpx;
			justify-content: center;
			align-items: center;

			image {
				margin-bottom: 6rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.key-box-input {
		padding: 24rpx 18rpx;
		font-size: 28rpx;
		border-radius: 16rpx;
		background: #f5f5f5;
		align-items: center;


		.add-icon {
			width: 48rpx;
			height: 48rpx;
			flex-shrink: 0;
			margin-right: 16rpx;
		}

		.textarea {
			flex: 1;
			font-size: 28rpx;
			line-height: 40rpx;
		}
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 0 32rpx;
	}

	.content {
		flex: 1;
		padding: 32rpx 0;
	}

	.header {
		padding-top: 32rpx;
	}

	.key-box {
		padding-bottom: 32rpx;
	}

	.header,
	.key-box,
	.status_bar {
		flex-shrink: 0;
	}

	.model-item {
		margin-top: 14rpx;
	}

	.history {
		font-size: 48rpx;
		font-weight: 600;
		padding: 20rpx 32rpx;
		flex-shrink: 0;
	}

	.flex-column-popup {
		&.active {
			background: #000000;

			.model-name,
			.consume {
				color: #fff;
			}

			.model-desc-text {
				color: #888888;
			}
		}

		border-radius: 16rpx;
		background: #FAFAFAFF;
		padding: 16rpx 0;
		font-size: 24rpx;
		width: 49%;

		.li {
			width: 100%;

			.diamond {
				width: 20rpx;
				height: 26rpx;
			}

			.consume {
				font-size: 24rpx;
			}

			.model-desc {
				margin-top: 16rpx;
				margin-bottom: 12rpx;

				.model-desc-text {
					line-height: 32rpx;
					color: #888888;
				}
			}

			.model-logo {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}

			margin: 0 16rpx;

			.model-name {
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}

	.model-logo {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		margin-right: 12rpx;
	}

	.model-name {
		font-size: 24rpx;
		color: #333;
	}

	.left {
		padding: 4rpx 16rpx 4rpx 4rpx;
		margin-left: 16rpx;
		border-style: solid;
		border-width: 4rpx;
		border-color: #49F6FC;
		//border-image: linear-gradient(270deg, #C5FF59, #49F6FC) 1;
		border-radius: 246rpx;
	}

	.sale {
		margin-right: 36rpx;
		padding: 10rpx 28rpx;
		font-size: 28rpx;
		background: linear-gradient(90deg, #49F6FC 0%, #C5FF59 100%);
		border-radius: 246rpx;
	}

	.title-box {
		margin-top: 140rpx;

		.title-text {
			font-size: 48rpx;
			font-weight: 600;
		}

		.title-logo {
			margin-top: 32rpx;
			width: 191rpx;
			height: 20.63rpx;
		}
	}

	.popup-content {
		padding: 20rpx;
		background-color: #fff;
	}

	.left-popup-content {
		width: 70vw;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.menu-scroll {
			flex: 1;
			height: 0;
		}

		.menu-list {
			padding: 0 32rpx;

			.menu-item {
				//padding: 30rpx 20rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid #eee;

				&:active {
					background-color: #f5f5f5;
				}
			}
		}
	}
</style>